<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //共同点：复制

        //1. 浅拷贝：只复制引用，而未复制真正的值。
        var arr1 = ['a','b','c','d'];
        var arr2 = arr1;
        var obj1 = {a:1,b:2}
        var obj2 = Object.assign(obj1);
        //2. 深拷贝：是复制真正的值 （不同引用）
        var obj3 = {
            a:1,
            b:2
        }
        var obj4 = JSON.parse(JSON.stringify( obj3 ));
        var obj5 = {
            a:1,
            b:2
        }
        //递归的形式
        function copyObj( obj ){
            if(  Array.isArray(obj)  ){
                var newObj = [];
            }else{
                var newObj = {};
            }
            for( var key in obj ){
                if( typeof obj[key] == 'object' ){
                newObj[key] = copyObj(obj[key]);
                }else{
                newObj[key] = obj[key];
                }
            }
            return newObj;
        }
        console.log(  copyObj(obj5),"hahha "  );
        // let a = {
        //     age: 1
        // }
        // let b = a  //在赋值的过程中复制了地址
        // a.age = 2
        // console.log(b.age) // 2
        // console.log(a.age) // 2

        // -解决上述问题-----需要用到浅拷贝

        // let a = {
        //     age: 1
        // }
        // let b = Object.assign({},a)
        // a.age = 2
        // console.log(b.age) // 1
        // console.log(a.age) // 2

        // let a = {
        //     age: 1
        // }
        // let b = {...a}
        // a.age = 2
        // console.log(b.age) // 1
        // console.log(a.age) // 2
        
        // let a = {
        //     age: 1,
        //     jobs: {
        //         first: 'FE'
        //     }
        // }
        // let b = { ...a }  //浅拷贝只能解决第一层的问题
        // a.jobs.first = 'native'
        // console.log(b.jobs.first) // native
        // console.log(a.jobs.first) // native

        //-解决上述问题--------需要用到深拷贝
        // let a = {
        //     age: 1,
        //     jobs: {
        //         first: 'FE',
        //         second:undefined,
        //         third:function(){},
        //         fourth:Symbol('male')
        //     }
        // }
        // let b = JSON.parse(JSON.stringify(a))
        // a.jobs.first = 'native'
        // console.log(b.jobs.first) // FE
        // console.log(b) //jobs里只有first:'FE'

        
    </script>
</head>
<body>
    <div id="parent">
        <div id="child"></div>
    </div>
</body>
</html>